<template>
  <div>
    <SearchSelector
      ref="refSearchSelector"
      @doSearch="onSearch"
    ></SearchSelector>
    <div class="school-content mt50">
      <div class="school-list-container">
        <h2 class="border-title">大学列表</h2>
        <div class="school-list">
          <div
            @click="goUniversityInfoDetail(school.schoolId)"
            :key="'school'+index"
            v-for="(school, index) in schoolList"
            class="school-box">
            <div class="school-list-left">
              <img class="school-img" :src="school.logo" alt="">
              <span class="school-name">{{school.name}}</span>
              <span class="school-region">{{school.provinceName}}</span>
            </div>
            <div class="school-list-right">
              <i
                :key="'property'+index"
                v-for="(property, index) in school.propertyList"
                class="school-property">{{property}}</i>
            </div>
          </div>
        </div>
        <el-pagination
          class="mt50 pagination"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total">
        </el-pagination>
      </div>
      <div class="school-hot-list-container">
        <h2 class="border-title">热门学校</h2>
        <div class="school-hot-list">
          <div
            @click="goUniversityInfoDetail(schoolHot.schoolId)"
            :key="'schoolHot'+index"
            v-for="(schoolHot, index) in schoolHotList"
            class="school-hot-box">
            {{schoolHot.schoolName}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchSelector from './comp/SearchSelector'
import { simplifyArray } from '../../utils/array.util'

export default {
  name: 'UniversityInfo',
  components: {
    SearchSelector
  },
  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      schoolList: [],
      schoolHotList: [],
      searchModel: {},
    }
  },
  mounted () {
    this.setPropertyId()
    this.getSchoolList()
    this.getSchoolHotList()
  },
  methods: {
    setPropertyId () {
      const propertyId = this.$route.query.propertyId
      if (propertyId) {
        this.$refs.refSearchSelector.setPropertyId(propertyId)
      }
    },
    goUniversityInfoDetail (id) {
      this.$router.push({
        path: '/universityInfoDetail',
        query: { id }
      })
    },
    onSizeChange (val) {
      this.pageSize = val
      this.getSchoolList()
    },
    onCurrentChange (val) {
      this.pageNo = val
      this.getSchoolList()
    },
    onSearch (searchModel) {
      this.searchModel = searchModel
      this.pageNo = 1
      this.getSchoolList()
    },
    getSchoolList () {
      this.$http.get('/schoolController/list/school', {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchModel
      }).then(value => {
        // logo: "http://zyfiles.ubzyw.com/res/1509005171145.png"
        // name: "北京大学"
        // property: "一流大学,985工程,211工程,C9联盟"
        // provinceId: 1
        // provinceName: "北京"
        // schoolId: 2
        this.schoolList = simplifyArray(value.list, (school) => {
          const { property, ...other } = school
          return {
            propertyList: property ? property.split(',') : [],
            ...other
          }
        })
        this.total = value.total
      })
    },
    getSchoolHotList () {
      this.$http.get('/schoolController/schoolSearchHistory')
        .then(value => {
          // "total": 28,
          // "schoolId": 1,
          // "schoolName": "山东大学"
          this.schoolHotList = value
        })
    }
  }
}
</script>

<style scoped lang="less">
  .school-content {
    display: flex;

    .school-list-container {
      flex: 1;
      padding-right: 50px;

      .border-title {
        font-size: 22px;
        color: #1F2329;
      }

      .school-list {
        border-top: 1px solid #EFF0F1;
        margin-top: 10px;
      }

      .school-box {
        cursor: pointer;
        box-sizing: border-box;
        padding: 16px 8px;
        border-bottom: 1px solid #EFF0F1;
        display: flex;
        &:hover {
          .school-name, .school-region{
            color: #FF6B51;
          }
        }

        .school-list-left {
          flex: 1;
        }

        .school-list-right {
          width: 500px;
        }

        .school-img {
          width: 36px;
          height: 36px;
          vertical-align: middle;
          margin-right: 8px;
        }

        .school-name {
          display: inline-block;
          color: #1F2329;
          width: 180px;
        }

        .school-region {
          display: inline-block;
          color: #1F2329;
          width: 100px;
        }

        .school-property {
          display: inline-block;
          border: 1px solid #007EFA;
          border-radius: 26px;
          height: 26px;
          line-height: 26px;
          padding: 0 6px;
          font-size: 14px;
          color: #007EFA;
          font-style: normal;
          margin: 4px;
        }
      }
    }

    .school-hot-list-container {
      width: 453px;

      .school-hot-list {
        border-top: 1px solid #EFF0F1;
        margin-top: 10px;
      }

      .school-hot-box {
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        color: #373C43;

        &:hover {
          background: #FAFBFC;
          color: #FF6B51;
        }
      }
    }
  }
</style>
